<template>
  <div>
    <div class="file-wrapper relative">
      <input ref="excel-upload" type="file" accept=".xlsx, .xls" @change="handleChange" style="display:none" />
      <a-button type="primary" icon="file-excel" size="large" style="z-index:99" @click="handleUpload" :loading="loading">
        上传Excel
      </a-button>
      <p class="text">请选择Excel上传 支持(xlsx,xls)格式</p>
    </div>

    <standard-table :pagination="false" :isShow="isShow" :tableData="tableData" :tableHead="tableHead" />

  </div>
</template>
<script>
import XLSX from 'xlsx';
import standardTable from './standardTable/index.vue';
import { uploadExcelApi } from '@/services/employeeManage'

export default {
  inject: ["file"],
  components: { standardTable },
  data () {
    return {
      loading: false,
      tableData: [],
      tableHead: [],
      isShow: false
    };
  },
  methods: {
    handleChange (e) {
      const file = e.target.files[0];

      if (!file) return;
      //判断格式
      if (!this.isExcel(file)) {
        this.$message.warning('只能选择xlxs,xls文件');
        return;
      }
      //判断大小
      if (file.size / 1024 / 1024 > 1) {
        this.$message.warning('上传文件大小不能超过1M');
        return;
      }
      this.loading = true;
      const reader = new FileReader();
      reader.readAsArrayBuffer(file);
      reader.onload = e => {
        const data = e.target.result;
        const workbook = XLSX.read(data, { type: 'array' });
        const firstSheetName = workbook.SheetNames[0];
        const worksheet = workbook.Sheets[firstSheetName];
        setTimeout(() => {
          this.loading = false;
          const head = this.getHeaderRow(worksheet);
          this.tableHead = head.map(item => {
            return {
              title: item,
              dataIndex: item
            };
          });
          const tableData = XLSX.utils.sheet_to_json(worksheet);
          tableData.forEach(item => {
            item.id = parseInt(Math.random(0, 1) * 10000);
          });
          this.tableData = tableData;
        }, 500);
      };
      // excel文件上传
      this.fileFormData(file, true)

      this.file.set(e.target.files[0])
    },
    fileFormData (file, type) {
      let fileFormData = new FormData();
      fileFormData.append("file", file);
      if (this.$Storage.get('excelTypes')) {
        if (this.$Storage.get('excelTypes') == 1) {
          fileFormData.append("type", 'employee_import'); // 上传类型 employee_import雇员批量导入,employee_quit员工批量离职
          fileFormData.append("isMapping", true);
        } else {
          fileFormData.append("type", 'employee_quit');
          fileFormData.append("isMapping", false);
        }
      }

      if (type) {
        let config = {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        }
        uploadExcelApi(fileFormData, config).then(res => {
          console.log(res)
          let { code, data } = res.data

          if (code === 200) {
            if (data) {
              if (Object.keys(data.mapped).length != 0) { // mapped对象不为空(有不匹配项目) 跳转step2 否则跳转step3
                this.$Storage.set('fieldMatchData', data)
                this.$parent.nextBtnClkFn(1)
              } else {
                this.$parent.nextBtnClkFn(2)
              }
            } else {
              this.$parent.nextBtnClkFn(1)
            }

          }
        }).catch(err => {
          console.log("err", err)
        })
      }
    },
    generateData ({ header, results }) {
      this.excelData.header = header;
      this.excelData.results = results;
      this.onSuccess && this.onSuccess(this.excelData);
    },
    //获取表头
    getHeaderRow (sheet) {
      const headers = [];
      const range = XLSX.utils.decode_range(sheet['!ref']);
      let C;
      const R = range.s.r;
      for (C = range.s.c; C <= range.e.c; ++C) {
        const cell = sheet[XLSX.utils.encode_cell({ c: C, r: R })];
        let hdr = 'UNKNOWN ' + C;
        if (cell && cell.t) hdr = XLSX.utils.format_cell(cell);
        headers.push(hdr);
      }
      return headers;
    },
    handleUpload () {
      this.$refs['excel-upload'].click();
    },
    isExcel (file) {
      return /\.(xlsx|xls|csv)$/.test(file.name);
    }
  }
};
</script>
<style lang="less" scoped>
.file-wrapper {
  width: 100%;
  height: 350px;
  line-height: 350px;
  text-align: center;
  background: #e6ecf4;
  position: relative;
  .text {
    position: absolute;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
  }
}
</style>